<template>
  <div class="box">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>代办事项</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="add"
          >新建事项</el-button
        >
      </div>
      <div v-for="item in list" :key="item" class="text item">
        <el-link type="primary" :underline="false" v-if="item.status === 1" @click="godetail(item.id)">{{
          item.title
        }}</el-link>
        <a
        v-if="item.status === 1"
        href="javascript:void(0);"
          style="float: right; color: red"
          @click="deletebyid(item.id)"
        >
          删除
        </a>
      </div>
    </el-card>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>已办事项</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="add"
          >新建事项</el-button
        >
      </div>
      <div v-for="item in list" :key="item" class="text item">
        <el-link type="primary" :underline="false" v-if="item.status === 2"  @click="godetail(item.id)">{{
          item.title
        }}</el-link> <a
        v-if="item.status === 2"
        href="javascript:void(0);"
          style="float: right; color: red"
          @click="deletebyid(item.id)"
        >
          删除
        </a>
      </div>
    </el-card>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :timestamp="activity.timestamp"
      >
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>
    <el-card class="box-card" style="margin-top:30px" shadow="hover">
      <div slot="header" class="clearfix">
        <span>待发事项</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="add"
          >新建事项</el-button
        >
      </div>
     <div v-for="item in list" :key="item" class="text item">
        <el-link type="primary" :underline="false" v-if="item.status === 3"  @click="godetail(item.id)">{{
          item.title
        }}</el-link> <a
        v-if="item.status === 3"
        href="javascript:void(0);"
          style="float: right; color: red"
          @click="deletebyid(item.id)"
        >
          删除
        </a>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top:30px" shadow="hover">
      <div slot="header" class="clearfix">
        <span>已发事项</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="add"
          >新建事项</el-button
        >
      </div>
      <div v-for="item in list" :key="item" class="text item">
        <el-link type="primary" :underline="false" v-if="item.status === 4"  @click="godetail(item.id)">{{
          item.title
        }}</el-link> <a v-if="item.status === 4"
        href="javascript:void(0);"
          style="float: right; color: red"
          @click="deletebyid(item.id)"
        >
          删除
        </a>
      </div>
    </el-card>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { getTokenManager } from "@/api/managers";
import { getToken } from "@/utils/auth";
import { pageForm, deleteFormById } from "@/api/form";
export default {
  data() {
    return {
      creditId: null,
      list: [],
      activities: [
        {
          content: "学习JavaScript",
          timestamp: "2021-12-6 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more",
        },
        {
          content: "学习java",
          timestamp: "2021-12-6 20:46",
          color: "#0bbd87",
        },
        {
          content: "学习python",
          timestamp: "2021-12-6 20:46",
          size: "large",
        },
        {
          content: "学习c++",
          timestamp: "2021-12-6 20:46",
        },
      ],
    };
  },
  created() {
    getTokenManager(getToken()).then((res) => {
      this.creditId = res.data.userInfo.id;
      pageForm(1, 100, this.creditId).then((res) => {
        this.list = res.data.list;
      });
    });
  },
  methods: {
    godetail(id){
       this.$router.push({
          path: '/form/flow',
          query: {
            id: id
          }
        })
    },
    add() {
      this.$router.push("/form/flow");
    },
    deletebyid(id) {
      deleteFormById(id).then((res) => {
        pageForm(1, 100, this.creditId).then((res) => {
        this.list = res.data.list;
      });
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 1%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 35%;
  margin-left: 3%;
}
</style>